<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/style1.css">
	<script type="text/javascript" src="js/tween.js"></script>
</head>
<body id="body_box" style="border: 1px solid #fff">
	<div id="box" onclick="scrollToTop()">
		scrollToTop
	</div>
</body>
<script type="text/javascript">
	var body_box = document.getElementById('body_box');
	var windowHeight = document.documentElement.clientHeight;
	var box = document.getElementById('box');
	window.onscroll = function(){
		var scrollTop = body_box.scrollTop;
		if (scrollTop + windowHeight < 3000) {
			box.style.marginTop = scrollTop + windowHeight - box.offsetHeight + 'px';
		}else{
			box.style.marginTop = 3000 - box.offsetHeight + 'px';
		}
		if (scrollTop > 800) {
			box.style.display = 'block';
		}else{
			box.style.display = 'none';
		}
	}

	function scrollToTop(){
		var start = body_box.scrollTop;
		var end = 0;
		var change = end - start;
		var maxT = 10;
		var t = 0;
		var timer = setInterval(function(){
			t++
			if (t >= maxT) {
				clearInterval(timer);
			}
			body_box.scrollTop = Tween.Bounce.easeOut(t,start,change,maxT);
		},30);
	}

</script>
</html>